<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta name="author" content="Darko Bunic"/>
		<meta name="description" content="Dialog box"/>
		<link rel="stylesheet" href="redips-dialog.css" type="text/css" media="screen" />
		<script type="text/javascript" src="redips-dialog.js"></script>
		<script type="text/javascript">
			// define redips_init variable
			var redips_init;
			// dialog box initialization (called from event)
			redips_init = function () {
				REDIPS.dialog.init();
				REDIPS.dialog.op_high = 60;
				REDIPS.dialog.fade_speed = 18;
				//REDIPS.dialog.close_button = 'Z';
			}
	
			// execute after button1 is clicked 
			function button1() {
				alert('Hi from function button1 ...');
			}
	
			// execute after button2 is clicked
			function button2(param) {
				var msg;
				if (param !== undefined) {
					msg = 'Hi from function button2 - ' + param;
				}
				else {
					msg = 'Hi from function button2 ...';
				}
				alert(msg);
			}
			// add onload event listener
			if (window.addEventListener) {
				window.addEventListener('load', redips_init, false);
			}
			else if (window.attachEvent) {
				window.attachEvent('onload', redips_init);
			}
		</script>
		<style>
			body {
				font-family: arial;
			}		
			/* ordered list demo */
			#ol_demo li {
				margin-bottom: 10px;
			}
		</style>
		<title>Dialog box demo</title>
	</head>
	<body>
		<center>
			<h1><a href="http://www.redips.net/javascript/dialog-box/">www.redips.net</a></h1>
			<h2>Dialog box demo - 1.5.1</h2>
		</center>
	
		Examples:
	
		<!-- "return false" in onclick is needed to prevent jump to the top after link is clicked -->
		<ol id="ol_demo">
			<li>
				<a href="#" onclick="REDIPS.dialog.show(150, 120, 'Simple dialog');return false">Simple dialog</a><br/>REDIPS.dialog.show(150, 120, 'Simple dialog')			
			</li>
			<li>
				<a href="#" onclick="REDIPS.dialog.show(200, 200, 'Bigger dialog with renamed button', 'OK');return false">Bigger dialog with renamed button</a><br/>REDIPS.dialog.show(200, 200, 'Bigger dialog with renamed button', 'OK')
			</li>
			<li>
				<a href="#" onclick="REDIPS.dialog.show(200, 100, 'Dialog with two buttons', 'Cancel', 'Yes');return false">Dialog with two buttons</a><br/>REDIPS.dialog.show(200, 100, 'Dialog with two buttons', 'Cancel', 'Yes')
			</li>
			<li>
				<a href="#" onclick="REDIPS.dialog.show(200, 100, 'Action on second button', 'Cancel', 'Yes|button2');return false">Action on second button</a><br/>REDIPS.dialog.show(200, 100, 'Action on second button', 'Cancel', 'Yes|button2')
			</li>
			<li>
				<a href="#" onclick="REDIPS.dialog.show(200, 100, 'Action on both buttons', 'Cancel|button1', 'Yes|button2|hello');return false">Action on both buttons (with parameter on second button)</a><br/>REDIPS.dialog.show(200, 100, 'Action on both buttons', 'Cancel|button1', 'Yes|button2|hello')
			</li>
			<li>
				<!-- for local demo -->
				<a href="#" onclick="REDIPS.dialog.show(70, 70, 'icon_smile.gif');return false">Dialog with image</a><br/>REDIPS.dialog.show(70, 70, 'icon_smile.gif')
				<!-- for www.redips.net -->
				<!--
				<a href="#" onclick="REDIPS.dialog.show(100, 90, '/wp-includes/images/crystal/document.png');return false">Dialog with image</a><br/>REDIPS.dialog.show(100, 90, '/path/img1.png')
				 -->
			</li>
			<li>
				<!-- for local demo -->
				<a href="#" onclick="REDIPS.dialog.show(70, 70, 'icon_smile.gif,icon_smile.gif,icon_smile.gif');return false">Dialog with more images</a><br/>REDIPS.dialog.show(70, 70, 'icon_smile.gif,icon_smile.gif,icon_smile.gif')
				<!-- for www.redips.net -->
				<!--
				<a href="#" onclick="REDIPS.dialog.show(100, 90, '/wp-includes/images/crystal/document.png,/wp-includes/images/crystal/audio.png,/wp-includes/images/crystal/spreadsheet.png');return false">Dialog with more images</a><br/>REDIPS.dialog.show(100, 90, '/path/img1.png,/path/img2.png,/path/img3.png')
				 -->
			</li>
			<li>
				<!-- for local demo -->
				<a href="#" onclick="REDIPS.dialog.show(70, 70, 'Hello!|icon_smile.gif,icon_smile.gif,icon_smile.gif');return false">Dialog with more images and text</a><br/>REDIPS.dialog.show(70, 70, 'Hello!|icon_smile.gif,icon_smile.gif,icon_smile.gif')
				<!-- for www.redips.net -->
				<!-- 
				<a href="#" onclick="REDIPS.dialog.show(100, 90, 'Hello!|/wp-includes/images/crystal/document.png,/wp-includes/images/crystal/audio.png,/wp-includes/images/crystal/spreadsheet.png');return false">Dialog with more images and text</a><br/>REDIPS.dialog.show(100, 90, 'Hello!|/path/img1.png,/path/img2.png,/path/img3.png')
				 -->
			</li>
			<li>
				<!-- for local demo -->
				<a href="#" onclick="REDIPS.dialog.show(150, 70, 'Have a nice day!|icon_smile.gif');return false">Dialog with image and text</a><br/>REDIPS.dialog.show(150, 70, 'Have a nice day!|icon_smile.gif')
				<!-- for www.redips.net -->
				<!-- 
				<a href="#" onclick="REDIPS.dialog.show(300, 160, 'Have a nice day!|/my/img/spider1_big.png');return false">Dialog with image and text</a><br/>REDIPS.dialog.show(300, 160, 'Have a nice day!|/path/spider1.png')
				 -->
			</li>
			<li>
				<!-- for local demo -->
				<a href="#" onclick="REDIPS.dialog.show(150, 70, 'Delete image?|icon_smile.gif', 'Cancel', 'Yes|button2');return false">Dialog with image, text and action on second button</a><br/>REDIPS.dialog.show(150, 70, 'Delete image?|icon_smile.gif', 'Cancel', 'Yes|button2')
				<!-- for www.redips.net -->
				<!-- 
				<a href="#" onclick="REDIPS.dialog.show(300, 160, 'Delete image?|/my/img/spider2_big.png', 'Cancel', 'Yes|button2');return false">Dialog with image, text and action on second button</a><br/>REDIPS.dialog.show(300, 160, 'Delete image?|/path/spider2.png', 'Cancel', 'Yes|button2')
				 -->
			</li>
			<!-- HTML page example -->
			<li>
				<a href="#" onclick="REDIPS.dialog.show(400, 180, 'table.html');return false">HTML page example</a><br/>REDIPS.dialog.show(400, 150, 'table.html')
			</li>
			<!-- youtube example1 -->
			<li>
				<a href="#" onclick="REDIPS.dialog.show(640, 390, 'www.youtube.com/v/2JWaWfKc5Vg');return false">YouTube example1</a><br/>REDIPS.dialog.show(640, 390, 'www.youtube.com/v/2JWaWfKc5Vg')
			</li>
			<!-- youtube example2 -->
			<li>
				<a href="#" onclick="REDIPS.dialog.show(640, 390, 'www.youtube.com/v/8LtMk4DwLzA');return false">YouTube example2</a><br/>REDIPS.dialog.show(640, 390, 'www.youtube.com/v/8LtMk4DwLzA')
			</li>
		</ol>
	</body>
</html>

